<!--
 * @Author: Bennty
 * @Date: 2024-08-07 10:05:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-08-07 10:30:44
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <el-card>
            <el-form :model="productInfo" ref="productInfoRef" label-width="auto">
                <el-row >
                    <el-col :span="8">
                        <el-form-item label="产品大类" prop="totalCategory" label-position="right">
                            <el-select v-model="productInfo.totalCategory">
                                <el-option label="塑料餐具" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品小类" prop="singleCategory" label-position="right">
                            <el-select v-model="productInfo.singleCategory">
                                <el-option label="抽屉餐盒" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="显示顺序" prop="displayOrder" label-position="right">
                            <el-input v-model.number="productInfo.displayOrder" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="产品名称" prop="productName" label-position="right">
                            <el-input v-model="productInfo.productName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" prop="remark" label-position="right">
                    <el-input v-model="productInfo.remark" type="textarea" placeholder="请输入" maxlength="128" show-word-limit></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="materials-card">
            <template #header>
                <h2>半成品：</h2>
            </template>
            <el-row class="prepared-product-list">
                <el-col :span="4" v-for="(item,index) in preparedProducts" :key="item">
                    <div class="prepared-product"  >
                        <el-image class="prepared-product-img" style="width: 178px; height: 178px; border-radius:10px" :src="item.image"></el-image>
                        <p>{{item.productName}}</p>
                        <p>￥ 0.5</p>
                        <div class="delete" @click="handleDeletePreparedProduct(index)">
                            <el-icon class="delete-icon"><SemiSelect /></el-icon>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <el-icon class="avatar-uploader-icon" @click="handleClickAddPreparedProduct"><Plus /></el-icon>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="materials-card">
            <template #header>
                <h2>辅材：</h2>
            </template>
                <el-row class="prepared-product-list">
                    <el-col :span="4" class="prepared-product"  v-for="(item,index) in auxiliaries" :key="item">
                        <el-image class="prepared-product-img" style="width: 178px; height: 178px;border-radius:10px" :src="item"></el-image>
                        <p>{{item.productName}}</p>
                        <p>￥ 0.5</p>
                        <div class="delete" @click="handleDeleteAuxiliaries(index)">
                            <el-icon class="delete-icon"><SemiSelect /></el-icon>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-icon class="avatar-uploader-icon" @click="handleClickAddAuxiliaries"><Plus /></el-icon>
                    </el-col>
                </el-row>
        </el-card>
        
        <div class="dialog-footer">
            <el-button  type="primary" @click="handleSubmitAddPreparedProduct">确 定</el-button>
            <el-button @click="handleCloseAddPreparedProduct">取 消</el-button>
        </div>
        <el-image-viewer v-if="showViewer" @close="handleCloseViewer" :url-list="urlList"></el-image-viewer>
        <el-dialog v-model="addPreparedProductVisible" title="半成品添加" width="25%" @close="handleCloseAddPreparedProduct">
            <el-form :model="preparedProductFormData" ref="preparedProductRef">
                <el-form-item prop="brandName">
                    <el-input v-model="preparedProductFormData.brandName" placeholder="请输入品牌名"/>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="part">
                            <el-select v-model="preparedProductFormData.part">
                                <el-option label="全部" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="需求数量" prop="number">
                            <el-input-number v-model="preparedProductFormData.number"  />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item prop="productName">
                    <el-select v-model="preparedProductFormData.productName" placeholder="请选择">
                        <el-option label="莱芜大峰长方白卡盒" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="image">
                    <el-upload class="avatar-uploader-form" :action="uploadImgUrl" :headers="headers" :show-file-list="false" 
                    :on-success="handlePreparedProductsSuccess" 
                    :before-upload="beforePreparedProductsUpload"
                    >
                        <img v-if="preparedProductFormData.image" :src="preparedProductFormData.image" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon-form"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="handleSubmitAddPreparedProduct">确 定</el-button>
                    <el-button @click="handleCloseAddPreparedProduct">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="addAuxiliariesVisible" title="添加辅材" width="25%" @close="handleCloseAddAuxiliaries">
            <el-form :model="auxiliaryFormData" ref="auxiliariesRef">
                <el-form-item prop="brandName">
                    <el-input v-model="auxiliaryFormData.brandName" placeholder="请输入品牌名"/>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="category">
                            <el-select v-model="auxiliaryFormData.category">
                                <el-option label="刀" :value="1"></el-option>
                                <el-option label="叉" :value="2"></el-option>
                                <el-option label="盘" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="specifications">
                            <el-select v-model="auxiliaryFormData.specifications">
                                <el-option label="18cm不锈钢" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="productName">
                            <el-select v-model="auxiliaryFormData.productName" placeholder="请选择">
                                <el-option label="大峰18cm不锈钢" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="number">
                            <el-input-number v-model="auxiliaryFormData.number" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item prop="image">
                    <el-upload class="avatar-uploader-form" 
                    :action="uploadImgUrl" 
                    :headers="headers" 
                    :show-file-list="false" 
                    :on-success="handleAuxiliariesSuccess" 
                    :before-upload="beforeAuxiliariesUpload"
                    >
                        <img v-if="auxiliaryFormData.image" :src="auxiliaryFormData.image" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon-form"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="handleSubmitAddAuxiliaries">确 定</el-button>
                    <el-button @click="handleCloseAddAuxiliaries">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, UploadInstance, UploadProps } from 'element-plus';
import {ref,reactive,toRefs} from 'vue';
import { globalHeaders } from "@/utils/request";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const productInfoRef = ref<FormInstance>();
const uploadRef = ref<UploadInstance>();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);

const productDetailInfo = ref({
    inventory: 50,
    boxNumber: 2500,
    unitCost: 5.5,
    assembleCost: 0.5,
    packageCost: 0.04,
    image:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    sourceFile: '源文件.png'
});
const showViewer = ref(false);
const urlList = ref<string[]>([]);
const addPreparedProductVisible = ref(false);
const preparedProductRef = ref<FormInstance>();
const preparedProducts = ref<any[]>([]);
const addAuxiliariesVisible = ref(false);
const auxiliariesRef = ref<FormInstance>();
const auxiliaries = ref<any[]>([]);

const data = reactive({
    productInfo:{
        totalCategory: undefined,
        singleCategory: undefined,
        productName: undefined,
        displayOrder: undefined,
        remark: undefined
    },
    preparedProductFormData:{
        brandName: undefined,
        part: 1,
        number: 1,
        productName: undefined,
        image: undefined
    },
    auxiliaryFormData:{
        brandName: undefined,
        category: undefined,
        specifications: undefined,
        productName: undefined,
        number: undefined,
        image: undefined
    }
});
const { productInfo,preparedProductFormData,auxiliaryFormData } = toRefs(data);

const handleClickSourceFile = ()=>{
    urlList.value.push(productDetailInfo.value.image);
    showViewer.value = true;
};

const handleCloseViewer = ()=>{
    urlList.value = [];
    showViewer.value = false;
};

const handlePreparedProductsSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    console.log(URL.createObjectURL(uploadFile.raw!));
    //@ts-ignore
    preparedProductFormData.value.image = URL.createObjectURL(uploadFile.raw!);
    console.log(preparedProductFormData.value.image);

};

const beforePreparedProductsUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片格式与要求不符')
        return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('图片不可超过 5MB!')
        return false
    }
    return true
};

const handleAuxiliariesSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    //@ts-ignore
    auxiliaryFormData.value.image = URL.createObjectURL(uploadFile.raw!);
};

const beforeAuxiliariesUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片格式与要求不符')
        return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('图片不可超过 5MB!')
        return false
    }
    return true
};

/** 点击添加半成品 */
const handleClickAddPreparedProduct = ()=>{
    if(preparedProducts.value.length<6){
        addPreparedProductVisible.value = true;
    }else{
        proxy?.$modal.msgWarning("半成品最多可加6个");
    };
};

/** 关闭添加半成品 */
const handleCloseAddPreparedProduct = ()=>{
    addPreparedProductVisible.value = false;
    preparedProductRef.value?.resetFields();
};

/** 点击提交添加半成品 */
const handleSubmitAddPreparedProduct = ()=>{
    preparedProducts.value.push({...preparedProductFormData.value});
    handleCloseAddPreparedProduct();
};

/** 点击添加辅材*/
const handleClickAddAuxiliaries = ()=>{
    if(preparedProducts.value.length < 12){
        addAuxiliariesVisible.value = true;
    }else{
        proxy?.$modal.msgWarning("辅材最多可加6个");
    };
};

/** 关闭添加辅材 */
const handleCloseAddAuxiliaries = ()=>{
    addAuxiliariesVisible.value = false;
    auxiliariesRef.value?.resetFields();
};

/** 点击提交辅材 */
const handleSubmitAddAuxiliaries = ()=>{
    auxiliaries.value.push({...auxiliaryFormData.value});
    handleCloseAddAuxiliaries();
};


//删除半成品
const handleDeletePreparedProduct = (index:number)=>{
    preparedProducts.value.splice(index,1);
};

//删除辅材
const handleDeleteAuxiliaries = (index:number)=>{
    auxiliaries.value.splice(index,1);
};

</script>

<style lang="scss" scoped>
.avatar-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    margin-left:5px;
    border-radius: 10px;
    border: 1px dashed black;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    &:hover{
        cursor: pointer;
    }
}
.materials-card{
    margin-top: 20px;
}
.prepared-product-list{
    // display: flex;
    .prepared-product{
        position: relative;
    }
    .prepared-product-img:nth-child(n+2){
        margin-left: 50px;
        border: dashed 1px grey;
    }
    .delete{
        position: absolute;
        right: 97px;
        top: 0px;
        width: 0;
        height: 0;
        border-style:solid;
        border-color: transparent #ff0000;
        border-width: 0 50px 50px 0;
        border-radius: 10px;
        .delete-icon{
            position: absolute;
            font-size: 20px;
            color: #ffffff;
            right: -40px;
            top: 5px;
        }
        &:hover{
            cursor: pointer;
        }
    }
}

.avatar-uploader-form{
    margin-left:5px;
    border-radius: 10px;
    border: 1px dashed black;
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 178px;
    text-align: center;
    .avatar{
        height: 178px;
    }
}

.avatar-uploader-icon-form{
    font-size: 28px;
    color: #8c939d;
    // width: 100%;
    height: 178px;
    text-align: center;
}

.dialog-footer{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>